<template>
	<view class="page">
		<u-sticky bgColor="#209eff" :enable="true">
			<u-tabs :list="tabsList" :is-scroll="false" active-color="#ffffff" :current="tabsCurrent"
				@change="tabsChange"></u-tabs>
		</u-sticky>
		<view v-if="tabsCurrent === 0">
			<view class="no-class" v-if="scheduleList.length == 0">
				暂无排课班级！
			</view>
			<view class="has-class" v-else>
				<view style="background-color: #fff;margin-top: 30rpx;padding: 20rpx;" v-for="(item,index) in scheduleList" :key="index">
					<view style="font-size: 30rpx;font-weight: 600;margin-bottom: 10rpx;">{{item.classVo.courseName}}</view>
					<view style="display: flex;margin-bottom: 10rpx;">
						<view class="label">排班课程：</view>
						<view class="value">{{item.classVo.courseName}} </view>
					</view>
					<view style="display: flex;margin-bottom: 10rpx;">
						<view class="label">上课时间：</view>
						<view class="value">每周{{convertToChineseNumbers(item.classVo.week)}} {{item.classVo.startTime}}-{{item.classVo.stopTime}}</view>
					</view>
					<view style="display: flex;margin-bottom: 10rpx;">
						<view class="label">上课教室：</view>
						<view class="value">{{item.classVo.classroomName}}</view>
					</view>
					<view style="display: flex;margin-bottom: 10rpx;">
						<view class="label">排班状态：</view>
						<view class="value" v-if="item.classVo.status==='0'">正常</view>
						<view class="value" v-if="item.classVo.status==='1'">调班</view>
						<view class="value" v-if="item.classVo.status==='2'">取消排班</view>
						<view class="value" v-if="item.classVo.status==='3'">未排学员</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="tabsCurrent === 1">
			<van-calendar @select="changeDate" v-model:show="show" :poppable="false" :show-title="false" :show-confirm="false" :style="{ height: '500px' }" />
            <view class="schedule-tip">
				注：排班日历中不显示放假、停班、请假的班级。
			</view>
		</view>
	</view>
</template>

<script>
	import {aboutClassCalendarList} from '@/utils/api.js';
	import moment from 'moment';
	export default {
		data() {
			return {
				tabsList: [{
						name: '排课班级',
						disabled: false
					},
					{
						name: '排班日历',
						disabled: false
					},
				],
				date: moment(new Date()).format('YYYY-MM-DD'),
				tabsCurrent: 0,
				scheduleList: [],
				show: true,
				mode: 'range'
			}
		},
		onLoad(){
			this.getCourseList()
		},
		methods: {
			async getCourseList(){
				uni.showLoading()
				const res = await aboutClassCalendarList({date:this.date})
				if(res.code == 200){
					uni.hideLoading()
				    this.scheduleList = res.data
				}
			 	
			},
			// 函数将阿拉伯数字字符串转换为中文数字字符串
			convertToChineseNumbers(input) {
				const numMap = {
				    '1': '一',
				    '2': '二',
				    '3': '三',
				    '4': '四',
				    '5': '五',
				    '6': '六',
				    '7': '七',
				    '8': '八',
				    '9': '九',
				    '0': '零'
				};
			    return input.split(',').map(num => numMap[num.trim()]).join('，');
			},
			changeDate(e){
			 this.date=	moment(e).format('YYYY-MM-DD')
			 this.getCourseList()
			},
			tabsChange(index) {
				this.tabsCurrent = index;

			},
			change(e) {
				console.log(e);
			}
		}
	}
</script>
<style>
	page{
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	::v-deep .u-tabs-scroll-flex {
		background-color: #228dff;
	}

	::v-deep .u-tab-item {
		// color: #a2a2a2 !important;
	}

	.no-class {
		text-align: center;
		margin-top: 200rpx;
		color: #999999;
	}
	.has-class{
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.schedule-tip{
		margin-top: 20rpx;
		margin-left: 20rpx;
		color: #999999;
	}
	.page{
		background-color: #F8F8F8;
	}
	.label{
		color:  #999999;
		margin-right: 30rpx;
	}
</style>